<template>
  <a-modal v-model:visible="visible" :title="form.id ? '编辑管理员' : '新增管理员'" :on-before-ok="confirm">
    <a-row>
      <a-form ref="formRef" :model="form" size="medium" auto-label-width :style="{ width: '500px' }">
        <a-form-item field="admin_role_id" label="部门名称" :rules="rules.admin_role_id">
          <a-select v-model="form.admin_role_id" placeholder="请选择" allow-clear allow-search>
            <a-option v-for="item in departMentOptions" :value="item.id">{{ item.name }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="username" label="用户名" :rules="rules.username">
          <a-input v-model="form.username" placeholder="请输入用户名" />
          <template #extra> 填写自己管理账号的名称。 </template>
        </a-form-item>
        <a-form-item field="password" label="密码" :rules="rules.password">
          <a-input-password
            v-model="form.password"
            placeholder="请设置不少于8位包含数字字母(大小写)特殊符号的密码"
            allow-clear
          />
          <template #extra> 填写自己管理账号的密码。 </template>
        </a-form-item>
        <a-form-item field="confirm_password" label="确认密码" :rules="rules.password">
          <a-input-password v-model="form.confirm_password" placeholder="请确认密码" allow-clear />
        </a-form-item>
        <a-form-item field="mobile" label="手机号码" :rules="rules.mobile">
          <a-input v-model="form.mobile" placeholder="请输入手机号码" />
        </a-form-item>

        <a-form-item field="remarks" label="备注姓名">
          <a-textarea v-model="form.remarks" placeholder="请输入备注姓名" />
        </a-form-item>
      </a-form>
    </a-row>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { getAdminList, addAdminList } from '@/apis'
import * as Regexp from '@/utils/regexp'

const props = defineProps({
  departMentOptions: {
    type: Array
  }
})
type Form = { name: string; phone: string; status: boolean }
const form: Form = reactive({
  id: '',
  admin_role_id: '',
  username: '',
  password: '',
  confirm_password: '',
  mobile: '',
  remarks: ''
})

const emits = defineEmits(['reFreshTable'])
const rules = {
  admin_role_id: [{ required: true, message: '请选择部门' }],
  username: [{ required: true, message: '请输入用户名' }],
  password: [
    { required: true, message: '请输入用户登录密码' },
    { match: Regexp.Password2, message: '密码格式不正确' }
  ],
  mobile: [
    { required: true, message: '请输入用户昵称' },
    { match: Regexp.Phone, message: '手机号格式不正确' }
  ]
}

const visible = ref(false)
const detailId = ref('')
const formRef = ref<FormInstance>()

const confirm = async () => {
  const flag = await formRef.value?.validate()
  if (flag) {
    return false
  } else {
    if (form.password != form.confirm_password) {
      Message.error('两次密码输入不一致')
      return false
    }
    let params = {
      admin_role_id: form.admin_role_id,
      username: form.username,
      password: form.password,
      mobile: form.mobile,
      remarks: form.remarks
    }
    const res = await addAdminList(params)
    let resData = JSON.parse(res)
    if (resData.code === 200) {
      Message.success(resData.message || '操作成功')
      visible.value = false
      form.id = ''
      form.admin_role_id = ''
      form.username = ''
      form.password = ''
      form.confirm_password = ''
      form.mobile = ''
      form.remarks = ''
      emits('reFreshTable')
    } else {
      Message.error(resData.message)
      return false
    }
  }
}

const edit = (id: string) => {
  form.id = id
  initCustomer(id)
  visible.value = true
}
const initCustomer = async (id) => {
  const res = await getAdminList({
    admin_id: id
  })
  let resData = JSON.parse(res)
  if (resData.code === 200) {
    let data = resData.result?.data?.[0] || {}
    form.id = data.id
    form.admin_role_id = data.admin_role_id
    form.username = data.username
    form.password = data.password
    form.confirm_password = data.password
    form.mobile = data.mobile
    form.remarks = data.remarks
  }
}
const create = () => {
  visible.value = true
  form.id = ''
}
defineExpose({ edit, create })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
